<template>
  <div id="app">
    <Slideout menu="#menu" panel="#panel" :toggleSelectors="['.toggle-button','#menu']" @on-open="open">
      <nav id="menu">
        <div class="menu-items" v-for="(menuItem, i) in menuItems" :key="i">
          <div class="menu-item" v-bind:class="{checked:item.name==aliasRoute}" v-for="(item, index) in menuItem.items" :key="index" v-bind:title="item.title" v-bind:name="item.name" @click="toSearch">
            <i v-bind:class="item.icon" aria-hidden="true"></i>
            &emsp;{{item.title}}
          </div>
        </div>
      </nav>
      <main id="panel">
        <header style="position: relative;">
          <i class="fa fa-bars fa-2x toggle-button" aria-hidden="true"></i>
          <div v-for="(menuItem, i) in menuItems" :key="i">
            <div class="nav-bar" v-for="(item, index) in menuItem.items" :key="index" v-if="item.name==aliasRoute">
              {{item.title}}
            </div>
          </div>
        </header>
        <router-view v-show="!loading" v-on:getLoadingFinished="showLoadingFinished"></router-view>
        <clip-loader :loading="loading" :color="color" :size="size"></clip-loader>
      </main>
    </Slideout>
  </div>
</template>

<script>
  import Slideout from 'vue-slideout'
  import ClipLoader from 'vue-spinner/src/ClipLoader.vue'
  export default {
    name: 'app',
    components: {
      Slideout,
      ClipLoader
    },
    data(){
      return {
        menuItems:[
          {
            name: 'date',
            items: [
              {
                name: 'date-state',
                title: '数据状况',
                icon: 'fa fa-list-alt'
              }
            ]
          },
          {
            name: 'user',
            items: [
              {
                name: 'user-number',
                title: '用户关注',
                icon: 'fa fa-eye'
              },
              // {
              //   name: 'user-question',
              //   title: '客户问题',
              //   icon: 'fa fa-question'
              // },
              {
                name: 'user-distribution',
                title: '用户分布',
                icon: 'fa fa-globe'
              }
            ]
          },
          {
            name: 'order',
            items: [
              {
                name: 'order-analysis',
                title: '订单分析',
                icon: 'fa fa-line-chart'
              }
            ]
          },
          {
            name: 'payment',
            items: [
              {
                name: 'payment-analysis',
                title: '支付分析',
                icon: 'fa fa-shopping-cart'
              },
              // {
              //   name: 'membership-analysis',
              //   title: '会员分析',
              //   icon: 'fa fa-user'
              // }
            ]
          },
          // {
          //   name: 'sale',
          //   items: [
          //     {
          //       name: 'sale-analysis',
          //       title: '营销分析',
          //       icon: 'fa fa-bar-chart'
          //     },
          //     {
          //       name: 'reading-analysis',
          //       title: '阅读分析',
          //       icon: 'fa fa-area-chart'
          //     }
          //   ]
          // }
        ],
        loading: true,
        navBarTitle: '数据状况',
        color: '#1aac19',
        size: '24px'
      }
    },
    methods: {
      open: function () {
        console.log('slideoutOpen')
      },
      toSearch(e){
        let route = e.currentTarget.getAttribute('name');
        if(!e.currentTarget.getAttribute('class').includes('checked')){
          this.$router.push(route);
          this.loading = true;
        }
      },
      showLoadingFinished(data){
        this.loading = data;
      },

    },
    mounted(){
      console.log(this.aliasRoute)
    },
    computed:{
      aliasRoute(){
        return this.$route.path.split('/').join('')
      }
    }
  }
</script>

<style>
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "Open Sans","Segoe UI","Helvetica",sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
  }

  .slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
    padding: 8px 0;
  }
.menu-items{
  padding: 8px 15px;
  position: relative;
  z-index: 9;
}
  .menu-item{
    text-align: center;
    font-size: 15px;
    padding: 5px 0;
    color: #4f4e4e;
  }
  .menu-item i{
  color: #9e9e9e;
}
  .slideout-menu-left {
    left: 0;
  }

  .slideout-menu-right {
    right: 0;
  }

  .slideout-panel {
    position: relative;
    z-index: 99;
    will-change: transform;
    min-height: 100vh;
    border-left: 1px solid #E0F2F1;
    background: #fff;
  }

  .slideout-open,
  .slideout-open body,
  .slideout-open .slideout-panel {
    overflow: hidden;
  }

  .slideout-open .slideout-menu {
    display: block;
  }
  .nav-bar{
    padding: 0 15px;
    height: 44px;
    line-height: 44px;
    background: #EEEEEE;
    text-align: center;
    font-size: 16px;
  }
  .toggle-button{
    color: #1aac19;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
  }
  header::after{
    content: " ";
    position: absolute;
    right: 0;
    left: 0;
    /*height: 1px;*/
    overflow: hidden;
    border-top: 1px solid #9E9E9E;
    transform: scaleY(0.5);
  }
  .v-spinner{
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
  }
  .checked,.checked i{
    color: #1aac19;
  }
</style>
